import {
  Route,
  Routes,
  unstable_HistoryRouter as HistoryRouter,
} from "react-router-dom";
import { history } from "./utils/history";
import { AuthComponent } from "./components/AuthComponent";
import { lazy, Suspense } from "react";
import "./App.scss";
const Home = lazy(() => import("./pages/Home"));
const Manage = lazy(() => import("./pages/Manage"));
const Send = lazy(() => import("./pages/Send"));
const Login = lazy(() => import("./pages/Login"));
const Layout = lazy(() => import("./pages/Layout"));

function App() {
  return (
    <HistoryRouter history={history}>
      <div className="App">
        <Suspense
          fallback={
            <div
              style={{
                textAlign: "center",
                marginTop: 200,
              }}
            >
              loading...
            </div>
          }
        >
          <Routes>
            <Route
              path="/"
              element={
                <AuthComponent>
                  <Layout></Layout>
                </AuthComponent>
              }
            >
              <Route path="home" element={<Home></Home>}></Route>
              <Route path="manage" element={<Manage></Manage>}></Route>
              <Route path="send" element={<Send></Send>}></Route>
            </Route>
            <Route path="/login" element={<Login></Login>}></Route>
          </Routes>
        </Suspense>
      </div>
    </HistoryRouter>
  );
}

export default App;
